<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        我是div标签
        <p>我是p标签</p>
    </div>

    <script>
        var oDiv = document.querySelector('div');

        var oP = document.querySelector('p');

        // // 创建有一个 a标签 节点
        // // 创建结果是一个空标签
        // var oA = document.createElement('a');

        // // 通过 DOM 操作设定 oA标签对象
        // oA.innerHTML = '我是DOM操作设定的标签内容';
        // oA.setAttribute('name' , 'a标签');
        // oA.id = 'a1';
        // oA.className = 'a2';
        // oA.style.color = 'blue';
        // // 绑定事件
        // oA.addEventListener('click' , function(){
        //     console.log(111);
        // })

        // // 将创建的a标签节点 写入到 div中

        // // 写入到div标签的最后
        // oDiv.appendChild( oA );

        // // // 在 指定标签之前写入
        // oDiv.insertBefore( oA , oP );

        // 获取 原始内容 拼接 新增的a标签
        // 将 原始字符串 + a标签字符串 写入 div标签中 
        // 内容看上去是一样的 但是 本质上已经是 新写入的 新的标签
        // 之前 oP对应的p标签对象 已经 被 字符串标签替换 已经不存在了
        // oDiv.innerHTML += '<a id="a1" class="a2" style="color:red">我是DOM操作拼接的标签</a>';


        // 删除 div 中的 标签节点
        // oDiv.removeChild( oP );

    </script>


    <script>
        /*
            创建节点
                var 变量 = document.createElement('标签名称');

            写入节点
                标签对象.appendChild(写入新的节点);
                    标签对象最后写入新的节点

                标签对象.insertBefore( 写入新的节点 , 原始标签对象 );
                    在 原始标签 之前 写入 新的节点

                一个标签节点只能在一个位置上写入


            DOM操作写入标签 和 节点操作写入标签的区别

                1,  节点操作创建的是一个标签对象
                    innerHTML 设定的是有一个 字符串

                2,  节点操作 创建的是一个 空标签对象 没有属性内容样式等等
                    innerHTML 写入的 字符串 可以直接设定标签的属性,内容,行内样式等

                3,  节点操作 创建的是一个标签对象 可以通过 DOM操作设定 样式属性等等
                        甚至可以通过DOM操作直接绑定事件
                    innerHTML 直接在 字符串中 做相应的设定
                        不能绑定事件

            实际项目中 创建一个标签对象 一般使用 节点方式操作
            实际项目中 创建多个标签对象 一般使用 字符串方式操作


            删除节点
                标签对象.removeChild(你要删除的节点);


            特别注意
                标签对象.innerHTML 写入的是新的内容 会 覆盖替换 之前的原始内容
                    执行了innerHTML 之后 即使 看上去标签没有改变 本质上已经是 新的标签了

        */


    </script>
</body>
</html>